import { useStore } from '@/hooks';
import { Collapse, Loading } from '@alifd/next';
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import LogTimeline from './LogTimeline';

const Panel = Collapse.Panel;

const OrderLogs = (props) => {
  const { orderId } = props;
  const { ccOrderStore: store } = useStore();
  const [logs, setLogs] = useState({ orderLogs: [], taskLogs: [] });

  useEffect(() => {
    (async () => {
      const order = await store.get(orderId);
      const data = await store.getLogs(order);
      setLogs(data);
    })();
  }, []);

  const { orderLogs, taskLogs } = logs;

  const collapeItems = taskLogs.map((cur, index) => {
    const { taskId, companyName, taskLog } = cur;
    return (
      <Panel
        title={`${taskId}${companyName}`}
        key={`${index}`}
        style={{ border: '1px solid #f0f0f0' }}
      >
        <LogTimeline
          title="任务日志"
          dataSource={taskLog}
        />
      </Panel>
    );
  });

  return (
    <Loading visible={toJS(store.loadingLogs)} style={{ width: '100%', height: '100%' }}>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <Collapse
          style={{ width: '60%' }}
          defaultExpandedKeys={['0']}
        >
          {collapeItems}
        </Collapse>
        <LogTimeline
          title="订单日志"
          width="40%"
          dataSource={orderLogs}
        />
      </div>
    </Loading>
  );
};

export default observer(OrderLogs);
